<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .outer {
            width: 500px;
            height: 500px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .center {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 0;
            left: 600px;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: purple;
            position: absolute;
            left: 600px;
            top: 500px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="center">
            <div class="inner"></div>
        </div>
    </div>

    <p></p>

    <script>

        // 语法:
        //     标准浏览器 
        //          事件对象.stopPropagation();
        //      IE
        //          事件对象.cancelBubble=true;


        // 事件传播  

        // 当行为发生的时候  当前的行为会按照结构父级的顺序向上传递 
        // 直到window为止  
        // 也叫事件冒泡  

        // 传播的三个阶段 :

        // 捕获   从window到目标的过程
        // 目标   准确触发事件的元素 
        // 冒泡   从事件目标到window的过程



        // 冒泡 
        // document.getElementsByClassName('inner')[0].addEventListener('click',function(){console.log('inner');})
        // document.getElementsByClassName('center')[0].addEventListener('click',function(){console.log('center');})
        // document.getElementsByClassName('outer')[0].addEventListener('click',function(){console.log('outer');})
        // document.body.addEventListener('click',function(){console.log('body');})
        // document.documentElement.addEventListener('click',function(){console.log('html');})
        // window.addEventListener('click',function(){console.log('window');})


        // inner 
        // center
        // outer
        // body
        // html
        // document
        // window 

        // 需求 点击inner 只输入innner 

        // 解决方案  阻止事件传播 

      

        // document.getElementsByClassName('inner')[0].addEventListener('click',function(e){e = e||window.event; console.log('inner'); e.stopPropagation();})
        // document.getElementsByClassName('center')[0].addEventListener('click',function(e){e =e||window.event;console.log('center');e.stopPropagation();})
        // document.getElementsByClassName('outer')[0].addEventListener('click',function(e){e =e||window.event;console.log('outer'); e.stopPropagation();})
        // document.body.addEventListener('click',function(e){e =e||window.event;console.log('body');e.stopPropagation();})
        // document.documentElement.addEventListener('click',function(e){e =e||window.event;console.log('html');e.stopPropagation();})
        // window.addEventListener('click',function(e){e =e||window.event;console.log('window');})




        // document.getElementsByClassName('inner')[0].addEventListener('click', function (e){
        //      e = e || window.event; 
        //      console.log('inner'); 
        //      e.stopPropagation()
        //     }, true)
        // document.getElementsByClassName('center')[0].addEventListener('click', function (e) { 
        //     e = e || window.event; 
        //     console.log('center');
        //     e.stopPropagation() }, true)
        // document.getElementsByClassName('outer')[0].addEventListener('click', function (e) { e = e || window.event; console.log('outer'); e.stopPropagation() }, true)
        // document.body.addEventListener('click', function (e) { e = e || window.event; console.log('body'); e.stopPropagation() }, true)
        // document.documentElement.addEventListener('click', function (e) { e = e || window.event; console.log('html');e.stopPropagation() }, true)
        // window.addEventListener('click', function (e) { console.log('window'); e.stopPropagation()}, true)


    </script>
</body>

</html>